﻿<!-- Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. -->

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Fabric Icons</title>

    <!-- Fabric core and Components CSS -->
    <link rel="stylesheet" type="text/css" href="../../css/fabric.css">
    <link rel="stylesheet" type="text/css" href="../../css/fabric.components.css">

    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }
        
        h1 {
            margin: 0;
            padding: 10px;
            margin-bottom: 20px;
            padding-left: 25px;
        }
        
        .docs-Intro,
        .docs-Example, 
        .docs-IconsSection {
            margin: 3vw;
        }

        .docs-IconsSection ul li {
            float: left;
            font-size: 11px;
            color: #666;
            text-align: center;
            width: 33.3%;
            height: 100px;
            padding: 10px;
            overflow: hidden;
        }
        
        .docs-IconsSection ul li .ms-Icon {
            color: #333;
            font-size: 32px;
            display: block;
            margin: 10px auto;
            }
        
        @media (min-width:540px) {
            .docs-IconsSection ul li {
                width: 25%;
            }
        }
        
        @media (min-width:840px) {
            .docs-IconsSection ul li {
                width: 20%;
            }
        }
        
        @media (min-width:1024px) {
            .docs-IconsSection ul li {
                width: 14%;
            }
        }
    </style>
</head>

<body>
    <section class="docs-Section">
        <div class="docs-Header">
            <h1 class="ms-font-su ms-fontColor-white ms-bgColor-themeDarker">Icons</h1>
            
            <p class="docs-Intro ms-font-l">Fabric uses a custom font for its iconography, containing glyphs that can be infinitely scaled, colored, styled, and even flipped for right-to-left localization.</p>

            <aside class="docs-Example">
                <p class="ms-font-l">Icons are straightforward to use. Simply combine the base <code>ms-Icon</code> class with a modifier class for the specific icon:</p>
                
                <code class="language-markup">
                    &lt;i class="ms-Icon ms-Icon--mail" aria-hidden="true"&gt;&lt;/i&gt;
                </code>
                
                <p class="ms-font-l">
                    <i class="ms-Icon ms-Icon--mail"></i>
                </p>
                
                <p class="ms-font-l">Note the <code>aria-hidden</code> attribute, which prevents screen readers from reading the icon. In cases where meaning is conveyed <em>only</em> through the icon, such as an icon-only navigation bar, be sure to apply an <code>aria-label</code> to the button for accessibility.</p>
            </aside>
        </div>

        <div class="docs-IconList docs-IconsSection">
            <ul>
                <li><i class="ms-Icon ms-Icon--circleEmpty"></i> <span class="ms-font-m">ms-Icon--circleEmpty</span></li>
                <li><i class="ms-Icon ms-Icon--circleFill"></i> <span class="ms-font-m">ms-Icon--circleFill</span></li>
                <li><i class="ms-Icon ms-Icon--placeholder"></i> <span class="ms-font-m">ms-Icon--placeholder</span></li>
                <li><i class="ms-Icon ms-Icon--star"></i> <span class="ms-font-m">ms-Icon--star</span></li>
                <li><i class="ms-Icon ms-Icon--plus"></i> <span class="ms-font-m">ms-Icon--plus</span></li>
                <li><i class="ms-Icon ms-Icon--minus"></i> <span class="ms-font-m">ms-Icon--minus</span></li>
                <li><i class="ms-Icon ms-Icon--question"></i> <span class="ms-font-m">ms-Icon--question</span></li>
                <li><i class="ms-Icon ms-Icon--exclamation"></i> <span class="ms-font-m">ms-Icon--exclamation</span></li>
                <li><i class="ms-Icon ms-Icon--person"></i> <span class="ms-font-m">ms-Icon--person</span></li>
                <li><i class="ms-Icon ms-Icon--mail"></i> <span class="ms-font-m">ms-Icon--mail</span></li>
                <li><i class="ms-Icon ms-Icon--infoCircle"></i> <span class="ms-font-m">ms-Icon--infoCircle</span></li>
                <li><i class="ms-Icon ms-Icon--alert"></i> <span class="ms-font-m">ms-Icon--alert</span></li>
                <li><i class="ms-Icon ms-Icon--xCircle"></i> <span class="ms-font-m">ms-Icon--xCircle</span></li>
                <li><i class="ms-Icon ms-Icon--mailOpen"></i> <span class="ms-font-m">ms-Icon--mailOpen</span></li>
                <li><i class="ms-Icon ms-Icon--people"></i> <span class="ms-font-m">ms-Icon--people</span></li>
                <li><i class="ms-Icon ms-Icon--bell"></i> <span class="ms-font-m">ms-Icon--bell</span></li>
                <li><i class="ms-Icon ms-Icon--calendar"></i> <span class="ms-font-m">ms-Icon--calendar</span></li>
                <li><i class="ms-Icon ms-Icon--scheduling"></i> <span class="ms-font-m">ms-Icon--scheduling</span></li>
                <li><i class="ms-Icon ms-Icon--event"></i> <span class="ms-font-m">ms-Icon--event</span></li>
                <li><i class="ms-Icon ms-Icon--folder"></i> <span class="ms-font-m">ms-Icon--folder</span></li>
                <li><i class="ms-Icon ms-Icon--documents"></i> <span class="ms-font-m">ms-Icon--documents</span></li>
                <li><i class="ms-Icon ms-Icon--chat"></i> <span class="ms-font-m">ms-Icon--chat</span></li>
                <li><i class="ms-Icon ms-Icon--sites"></i> <span class="ms-font-m">ms-Icon--sites</span></li>
                <li><i class="ms-Icon ms-Icon--listBullets"></i> <span class="ms-font-m">ms-Icon--listBullets</span></li>
                <li><i class="ms-Icon ms-Icon--calendarWeek"></i> <span class="ms-font-m">ms-Icon--calendarWeek</span></li>
                <li><i class="ms-Icon ms-Icon--calendarWorkWeek"></i> <span class="ms-font-m">ms-Icon--calendarWorkWeek</span></li>
                <li><i class="ms-Icon ms-Icon--calendarDay"></i> <span class="ms-font-m">ms-Icon--calendarDay</span></li>
                <li><i class="ms-Icon ms-Icon--folderMove"></i> <span class="ms-font-m">ms-Icon--folderMove</span></li>
                <li><i class="ms-Icon ms-Icon--panel"></i> <span class="ms-font-m">ms-Icon--panel</span></li>
                <li><i class="ms-Icon ms-Icon--popout"></i> <span class="ms-font-m">ms-Icon--popout</span></li>
                <li><i class="ms-Icon ms-Icon--menu"></i> <span class="ms-font-m">ms-Icon--menu</span></li>
                <li><i class="ms-Icon ms-Icon--home"></i> <span class="ms-font-m">ms-Icon--home</span></li>
                <li><i class="ms-Icon ms-Icon--favorites"></i> <span class="ms-font-m">ms-Icon--favorites</span></li>
                <li><i class="ms-Icon ms-Icon--phone"></i> <span class="ms-font-m">ms-Icon--phone</span></li>
                <li><i class="ms-Icon ms-Icon--mailSend"></i> <span class="ms-font-m">ms-Icon--mailSend</span></li>
                <li><i class="ms-Icon ms-Icon--save"></i> <span class="ms-font-m">ms-Icon--save</span></li>
                <li><i class="ms-Icon ms-Icon--trash"></i> <span class="ms-font-m">ms-Icon--trash</span></li>
                <li><i class="ms-Icon ms-Icon--pencil"></i> <span class="ms-font-m">ms-Icon--pencil</span></li>
                <li><i class="ms-Icon ms-Icon--flag"></i> <span class="ms-font-m">ms-Icon--flag</span></li>
                <li><i class="ms-Icon ms-Icon--reply"></i> <span class="ms-font-m">ms-Icon--reply</span></li>
                <li><i class="ms-Icon ms-Icon--miniatures"></i> <span class="ms-font-m">ms-Icon--miniatures</span></li>
                <li><i class="ms-Icon ms-Icon--voicemail"></i> <span class="ms-font-m">ms-Icon--voicemail</span></li>
                <li><i class="ms-Icon ms-Icon--play"></i> <span class="ms-font-m">ms-Icon--play</span></li>
                <li><i class="ms-Icon ms-Icon--pause"></i> <span class="ms-font-m">ms-Icon--pause</span></li>
                <li><i class="ms-Icon ms-Icon--onlineAdd"></i> <span class="ms-font-m">ms-Icon--onlineAdd</span></li>
                <li><i class="ms-Icon ms-Icon--onlineJoin"></i> <span class="ms-font-m">ms-Icon--onlineJoin</span></li>
                <li><i class="ms-Icon ms-Icon--replyAll"></i> <span class="ms-font-m">ms-Icon--replyAll</span></li>
                <li><i class="ms-Icon ms-Icon--attachment"></i> <span class="ms-font-m">ms-Icon--attachment</span></li>
                <li><i class="ms-Icon ms-Icon--drm"></i> <span class="ms-font-m">ms-Icon--drm</span></li>
                <li><i class="ms-Icon ms-Icon--pinDown"></i> <span class="ms-font-m">ms-Icon--pinDown</span></li>
                <li><i class="ms-Icon ms-Icon--refresh"></i> <span class="ms-font-m">ms-Icon--refresh</span></li>
                <li><i class="ms-Icon ms-Icon--gear"></i> <span class="ms-font-m">ms-Icon--gear</span></li>
                <li><i class="ms-Icon ms-Icon--smiley"></i> <span class="ms-font-m">ms-Icon--smiley</span></li>
                <li><i class="ms-Icon ms-Icon--info"></i> <span class="ms-font-m">ms-Icon--info</span></li>
                <li><i class="ms-Icon ms-Icon--lock"></i> <span class="ms-font-m">ms-Icon--lock</span></li>
                <li><i class="ms-Icon ms-Icon--search"></i> <span class="ms-font-m">ms-Icon--search</span></li>
                <li><i class="ms-Icon ms-Icon--questionReverse"></i> <span class="ms-font-m">ms-Icon--questionReverse</span></li>
                <li><i class="ms-Icon ms-Icon--notRecurring"></i> <span class="ms-font-m">ms-Icon--notRecurring</span></li>
                <li><i class="ms-Icon ms-Icon--tasks"></i> <span class="ms-font-m">ms-Icon--tasks</span></li>
                <li><i class="ms-Icon ms-Icon--check"></i> <span class="ms-font-m">ms-Icon--check</span></li>
                <li><i class="ms-Icon ms-Icon--x"></i> <span class="ms-font-m">ms-Icon--x</span></li>
                <li><i class="ms-Icon ms-Icon--ellipsis"></i> <span class="ms-font-m">ms-Icon--ellipsis</span></li>
                <li><i class="ms-Icon ms-Icon--dot"></i> <span class="ms-font-m">ms-Icon--dot</span></li>
                <li><i class="ms-Icon ms-Icon--arrowUp"></i> <span class="ms-font-m">ms-Icon--arrowUp</span></li>
                <li><i class="ms-Icon ms-Icon--arrowDown"></i> <span class="ms-font-m">ms-Icon--arrowDown</span></li>
                <li><i class="ms-Icon ms-Icon--arrowLeft"></i> <span class="ms-font-m">ms-Icon--arrowLeft</span></li>
                <li><i class="ms-Icon ms-Icon--arrowRight"></i> <span class="ms-font-m">ms-Icon--arrowRight</span></li>
                <li><i class="ms-Icon ms-Icon--download"></i> <span class="ms-font-m">ms-Icon--download</span></li>
                <li><i class="ms-Icon ms-Icon--directions"></i> <span class="ms-font-m">ms-Icon--directions</span></li>
                <li><i class="ms-Icon ms-Icon--microphone"></i> <span class="ms-font-m">ms-Icon--microphone</span></li>
                <li><i class="ms-Icon ms-Icon--caretUp"></i> <span class="ms-font-m">ms-Icon--caretUp</span></li>
                <li><i class="ms-Icon ms-Icon--caretDown"></i> <span class="ms-font-m">ms-Icon--caretDown</span></li>
                <li><i class="ms-Icon ms-Icon--caretLeft"></i> <span class="ms-font-m">ms-Icon--caretLeft</span></li>
                <li><i class="ms-Icon ms-Icon--caretRight"></i> <span class="ms-font-m">ms-Icon--caretRight</span></li>
                <li><i class="ms-Icon ms-Icon--caretUpLeft"></i> <span class="ms-font-m">ms-Icon--caretUpLeft</span></li>
                <li><i class="ms-Icon ms-Icon--caretUpRight"></i> <span class="ms-font-m">ms-Icon--caretUpRight</span></li>
                <li><i class="ms-Icon ms-Icon--caretDownRight"></i> <span class="ms-font-m">ms-Icon--caretDownRight</span></li>
                <li><i class="ms-Icon ms-Icon--caretDownLeft"></i> <span class="ms-font-m">ms-Icon--caretDownLeft</span></li>
                <li><i class="ms-Icon ms-Icon--note"></i> <span class="ms-font-m">ms-Icon--note</span></li>
                <li><i class="ms-Icon ms-Icon--noteReply"></i> <span class="ms-font-m">ms-Icon--noteReply</span></li>
                <li><i class="ms-Icon ms-Icon--noteForward"></i> <span class="ms-font-m">ms-Icon--noteForward</span></li>
                <li><i class="ms-Icon ms-Icon--key"></i> <span class="ms-font-m">ms-Icon--key</span></li>
                <li><i class="ms-Icon ms-Icon--tile"></i> <span class="ms-font-m">ms-Icon--tile</span></li>
                <li><i class="ms-Icon ms-Icon--taskRecurring"></i> <span class="ms-font-m">ms-Icon--taskRecurring</span></li>
                <li><i class="ms-Icon ms-Icon--starEmpty"></i> <span class="ms-font-m">ms-Icon--starEmpty</span></li>
                <li><i class="ms-Icon ms-Icon--upload"></i> <span class="ms-font-m">ms-Icon--upload</span></li>
                <li><i class="ms-Icon ms-Icon--wrench"></i> <span class="ms-font-m">ms-Icon--wrench</span></li>
                <li><i class="ms-Icon ms-Icon--share"></i> <span class="ms-font-m">ms-Icon--share</span></li>
                <li><i class="ms-Icon ms-Icon--documentReply"></i> <span class="ms-font-m">ms-Icon--documentReply</span></li>
                <li><i class="ms-Icon ms-Icon--documentForward"></i> <span class="ms-font-m">ms-Icon--documentForward</span></li>
                <li><i class="ms-Icon ms-Icon--partner"></i> <span class="ms-font-m">ms-Icon--partner</span></li>
                <li><i class="ms-Icon ms-Icon--reactivate"></i> <span class="ms-font-m">ms-Icon--reactivate</span></li>
                <li><i class="ms-Icon ms-Icon--sort"></i> <span class="ms-font-m">ms-Icon--sort</span></li>
                <li><i class="ms-Icon ms-Icon--personAdd"></i> <span class="ms-font-m">ms-Icon--personAdd</span></li>
                <li><i class="ms-Icon ms-Icon--chevronUp"></i> <span class="ms-font-m">ms-Icon--chevronUp</span></li>
                <li><i class="ms-Icon ms-Icon--chevronDown"></i> <span class="ms-font-m">ms-Icon--chevronDown</span></li>
                <li><i class="ms-Icon ms-Icon--chevronLeft"></i> <span class="ms-font-m">ms-Icon--chevronLeft</span></li>
                <li><i class="ms-Icon ms-Icon--chevronRight"></i> <span class="ms-font-m">ms-Icon--chevronRight</span></li>
                <li><i class="ms-Icon ms-Icon--peopleAdd"></i> <span class="ms-font-m">ms-Icon--peopleAdd</span></li>
                <li><i class="ms-Icon ms-Icon--newsfeed"></i> <span class="ms-font-m">ms-Icon--newsfeed</span></li>
                <li><i class="ms-Icon ms-Icon--notebook"></i> <span class="ms-font-m">ms-Icon--notebook</span></li>
                <li><i class="ms-Icon ms-Icon--link"></i> <span class="ms-font-m">ms-Icon--link</span></li>
                <li><i class="ms-Icon ms-Icon--chevronsUp"></i> <span class="ms-font-m">ms-Icon--chevronsUp</span></li>
                <li><i class="ms-Icon ms-Icon--chevronsDown"></i> <span class="ms-font-m">ms-Icon--chevronsDown</span></li>
                <li><i class="ms-Icon ms-Icon--chevronsLeft"></i> <span class="ms-font-m">ms-Icon--chevronsLeft</span></li>
                <li><i class="ms-Icon ms-Icon--chevronsRight"></i> <span class="ms-font-m">ms-Icon--chevronsRight</span></li>
                <li><i class="ms-Icon ms-Icon--clutter"></i> <span class="ms-font-m">ms-Icon--clutter</span></li>
                <li><i class="ms-Icon ms-Icon--subscribe"></i> <span class="ms-font-m">ms-Icon--subscribe</span></li>
                <li><i class="ms-Icon ms-Icon--unsubscribe"></i> <span class="ms-font-m">ms-Icon--unsubscribe</span></li>
                <li><i class="ms-Icon ms-Icon--personRemove"></i> <span class="ms-font-m">ms-Icon--personRemove</span></li>
                <li><i class="ms-Icon ms-Icon--receiptForward"></i> <span class="ms-font-m">ms-Icon--receiptForward</span></li>
                <li><i class="ms-Icon ms-Icon--receiptReply"></i> <span class="ms-font-m">ms-Icon--receiptReply</span></li>
                <li><i class="ms-Icon ms-Icon--receiptCheck"></i> <span class="ms-font-m">ms-Icon--receiptCheck</span></li>
                <li><i class="ms-Icon ms-Icon--peopleRemove"></i> <span class="ms-font-m">ms-Icon--peopleRemove</span></li>
                <li><i class="ms-Icon ms-Icon--merge"></i> <span class="ms-font-m">ms-Icon--merge</span></li>
                <li><i class="ms-Icon ms-Icon--split"></i> <span class="ms-font-m">ms-Icon--split</span></li>
                <li><i class="ms-Icon ms-Icon--eventCancel"></i> <span class="ms-font-m">ms-Icon--eventCancel</span></li>
                <li><i class="ms-Icon ms-Icon--eventShare"></i> <span class="ms-font-m">ms-Icon--eventShare</span></li>
                <li><i class="ms-Icon ms-Icon--today"></i> <span class="ms-font-m">ms-Icon--today</span></li>
                <li><i class="ms-Icon ms-Icon--oofReply"></i> <span class="ms-font-m">ms-Icon--oofReply</span></li>
                <li><i class="ms-Icon ms-Icon--voicemailReply"></i> <span class="ms-font-m">ms-Icon--voicemailReply</span></li>
                <li><i class="ms-Icon ms-Icon--voicemailForward"></i> <span class="ms-font-m">ms-Icon--voicemailForward</span></li>
                <li><i class="ms-Icon ms-Icon--ribbon"></i> <span class="ms-font-m">ms-Icon--ribbon</span></li>
                <li><i class="ms-Icon ms-Icon--contact"></i> <span class="ms-font-m">ms-Icon--contact</span></li>
                <li><i class="ms-Icon ms-Icon--eye"></i> <span class="ms-font-m">ms-Icon--eye</span></li>
                <li><i class="ms-Icon ms-Icon--glasses"></i> <span class="ms-font-m">ms-Icon--glasses</span></li>
                <li><i class="ms-Icon ms-Icon--print"></i> <span class="ms-font-m">ms-Icon--print</span></li>
                <li><i class="ms-Icon ms-Icon--room"></i> <span class="ms-font-m">ms-Icon--room</span></li>
                <li><i class="ms-Icon ms-Icon--post"></i> <span class="ms-font-m">ms-Icon--post</span></li>
                <li><i class="ms-Icon ms-Icon--toggle"></i> <span class="ms-font-m">ms-Icon--toggle</span></li>
                <li><i class="ms-Icon ms-Icon--touch"></i> <span class="ms-font-m">ms-Icon--touch</span></li>
                <li><i class="ms-Icon ms-Icon--clock"></i> <span class="ms-font-m">ms-Icon--clock</span></li>
                <li><i class="ms-Icon ms-Icon--fax"></i> <span class="ms-font-m">ms-Icon--fax</span></li>
                <li><i class="ms-Icon ms-Icon--lightning"></i> <span class="ms-font-m">ms-Icon--lightning</span></li>
                <li><i class="ms-Icon ms-Icon--dialpad"></i> <span class="ms-font-m">ms-Icon--dialpad</span></li>
                <li><i class="ms-Icon ms-Icon--phoneTransfer"></i> <span class="ms-font-m">ms-Icon--phoneTransfer</span></li>
                <li><i class="ms-Icon ms-Icon--phoneAdd"></i> <span class="ms-font-m">ms-Icon--phoneAdd</span></li>
                <li><i class="ms-Icon ms-Icon--late"></i> <span class="ms-font-m">ms-Icon--late</span></li>
                <li><i class="ms-Icon ms-Icon--chatAdd"></i> <span class="ms-font-m">ms-Icon--chatAdd</span></li>
                <li><i class="ms-Icon ms-Icon--conflict"></i> <span class="ms-font-m">ms-Icon--conflict</span></li>
                <li><i class="ms-Icon ms-Icon--navigate"></i> <span class="ms-font-m">ms-Icon--navigate</span></li>
                <li><i class="ms-Icon ms-Icon--camera"></i> <span class="ms-font-m">ms-Icon--camera</span></li>
                <li><i class="ms-Icon ms-Icon--filter"></i> <span class="ms-font-m">ms-Icon--filter</span></li>
                <li><i class="ms-Icon ms-Icon--fullscreen"></i> <span class="ms-font-m">ms-Icon--fullscreen</span></li>
                <li><i class="ms-Icon ms-Icon--new"></i> <span class="ms-font-m">ms-Icon--new</span></li>
                <li><i class="ms-Icon ms-Icon--mailEmpty"></i> <span class="ms-font-m">ms-Icon--mailEmpty</span></li>
                <li><i class="ms-Icon ms-Icon--editBox"></i> <span class="ms-font-m">ms-Icon--editBox</span></li>
                <li><i class="ms-Icon ms-Icon--waffle"></i> <span class="ms-font-m">ms-Icon--waffle</span></li>
                <li><i class="ms-Icon ms-Icon--work"></i> <span class="ms-font-m">ms-Icon--work</span></li>
                <li><i class="ms-Icon ms-Icon--eventRecurring"></i> <span class="ms-font-m">ms-Icon--eventRecurring</span></li>
                <li><i class="ms-Icon ms-Icon--cart"></i> <span class="ms-font-m">ms-Icon--cart</span></li>
                <li><i class="ms-Icon ms-Icon--socialListening"></i> <span class="ms-font-m">ms-Icon--socialListening</span></li>
                <li><i class="ms-Icon ms-Icon--mapMarker"></i> <span class="ms-font-m">ms-Icon--mapMarker</span></li>
                <li><i class="ms-Icon ms-Icon--org"></i> <span class="ms-font-m">ms-Icon--org</span></li>
                <li><i class="ms-Icon ms-Icon--replyAlt"></i> <span class="ms-font-m">ms-Icon--replyAlt</span></li>
                <li><i class="ms-Icon ms-Icon--replyAllAlt"></i> <span class="ms-font-m">ms-Icon--replyAllAlt</span></li>
                <li><i class="ms-Icon ms-Icon--eventInfo"></i> <span class="ms-font-m">ms-Icon--eventInfo</span></li>
                <li><i class="ms-Icon ms-Icon--group"></i> <span class="ms-font-m">ms-Icon--group</span></li>
                <li><i class="ms-Icon ms-Icon--money"></i> <span class="ms-font-m">ms-Icon--money</span></li>
                <li><i class="ms-Icon ms-Icon--graph"></i> <span class="ms-font-m">ms-Icon--graph</span></li>
                <li><i class="ms-Icon ms-Icon--noteEdit"></i> <span class="ms-font-m">ms-Icon--noteEdit</span></li>
                <li><i class="ms-Icon ms-Icon--dashboard"></i> <span class="ms-font-m">ms-Icon--dashboard</span></li>
                <li><i class="ms-Icon ms-Icon--mailEdit"></i> <span class="ms-font-m">ms-Icon--mailEdit</span></li>
                <li><i class="ms-Icon ms-Icon--pinLeft"></i> <span class="ms-font-m">ms-Icon--pinLeft</span></li>
                <li><i class="ms-Icon ms-Icon--heart"></i> <span class="ms-font-m">ms-Icon--heart</span></li>
                <li><i class="ms-Icon ms-Icon--heartEmpty"></i> <span class="ms-font-m">ms-Icon--heartEmpty</span></li>
                <li><i class="ms-Icon ms-Icon--picture"></i> <span class="ms-font-m">ms-Icon--picture</span></li>
                <li><i class="ms-Icon ms-Icon--cake"></i> <span class="ms-font-m">ms-Icon--cake</span></li>
                <li><i class="ms-Icon ms-Icon--books"></i> <span class="ms-font-m">ms-Icon--books</span></li>
                <li><i class="ms-Icon ms-Icon--chart"></i> <span class="ms-font-m">ms-Icon--chart</span></li>
                <li><i class="ms-Icon ms-Icon--video"></i> <span class="ms-font-m">ms-Icon--video</span></li>
                <li><i class="ms-Icon ms-Icon--soccer"></i> <span class="ms-font-m">ms-Icon--soccer</span></li>
                <li><i class="ms-Icon ms-Icon--meal"></i> <span class="ms-font-m">ms-Icon--meal</span></li>
                <li><i class="ms-Icon ms-Icon--balloon"></i> <span class="ms-font-m">ms-Icon--balloon</span></li>
                <li><i class="ms-Icon ms-Icon--cat"></i> <span class="ms-font-m">ms-Icon--cat</span></li>
                <li><i class="ms-Icon ms-Icon--dog"></i> <span class="ms-font-m">ms-Icon--dog</span></li>
                <li><i class="ms-Icon ms-Icon--bag"></i> <span class="ms-font-m">ms-Icon--bag</span></li>
                <li><i class="ms-Icon ms-Icon--music"></i> <span class="ms-font-m">ms-Icon--music</span></li>
                <li><i class="ms-Icon ms-Icon--stopwatch"></i> <span class="ms-font-m">ms-Icon--stopwatch</span></li>
                <li><i class="ms-Icon ms-Icon--coffee"></i> <span class="ms-font-m">ms-Icon--coffee</span></li>
                <li><i class="ms-Icon ms-Icon--briefcase"></i> <span class="ms-font-m">ms-Icon--briefcase</span></li>
                <li><i class="ms-Icon ms-Icon--pill"></i> <span class="ms-font-m">ms-Icon--pill</span></li>
                <li><i class="ms-Icon ms-Icon--trophy"></i> <span class="ms-font-m">ms-Icon--trophy</span></li>
                <li><i class="ms-Icon ms-Icon--firstAid"></i> <span class="ms-font-m">ms-Icon--firstAid</span></li>
                <li><i class="ms-Icon ms-Icon--plane"></i> <span class="ms-font-m">ms-Icon--plane</span></li>
                <li><i class="ms-Icon ms-Icon--page"></i> <span class="ms-font-m">ms-Icon--page</span></li>
                <li><i class="ms-Icon ms-Icon--car"></i> <span class="ms-font-m">ms-Icon--car</span></li>
                <li><i class="ms-Icon ms-Icon--dogAlt"></i> <span class="ms-font-m">ms-Icon--dogAlt</span></li>
                <li><i class="ms-Icon ms-Icon--document"></i> <span class="ms-font-m">ms-Icon--document</span></li>
                <li><i class="ms-Icon ms-Icon--metadata"></i> <span class="ms-font-m">ms-Icon--metadata</span></li>
                <li><i class="ms-Icon ms-Icon--pointItem"></i> <span class="ms-font-m">ms-Icon--pointItem</span></li>
                <li><i class="ms-Icon ms-Icon--text"></i> <span class="ms-font-m">ms-Icon--text</span></li>
                <li><i class="ms-Icon ms-Icon--fieldText"></i> <span class="ms-font-m">ms-Icon--fieldText</span></li>
                <li><i class="ms-Icon ms-Icon--fieldNumber"></i> <span class="ms-font-m">ms-Icon--fieldNumber</span></li>
                <li><i class="ms-Icon ms-Icon--dropdown"></i> <span class="ms-font-m">ms-Icon--dropdown</span></li>
                <li><i class="ms-Icon ms-Icon--radioButton"></i> <span class="ms-font-m">ms-Icon--radioButton</span></li>
                <li><i class="ms-Icon ms-Icon--checkbox"></i> <span class="ms-font-m">ms-Icon--checkbox</span></li>
                <li><i class="ms-Icon ms-Icon--story"></i> <span class="ms-font-m">ms-Icon--story</span></li>
                <li><i class="ms-Icon ms-Icon--bold"></i> <span class="ms-font-m">ms-Icon--bold</span></li>
                <li><i class="ms-Icon ms-Icon--italic"></i> <span class="ms-font-m">ms-Icon--italic</span></li>
                <li><i class="ms-Icon ms-Icon--underline"></i> <span class="ms-font-m">ms-Icon--underline</span></li>
                <li><i class="ms-Icon ms-Icon--quote"></i> <span class="ms-font-m">ms-Icon--quote</span></li>
                <li><i class="ms-Icon ms-Icon--styleRemove"></i> <span class="ms-font-m">ms-Icon--styleRemove</span></li>
                <li><i class="ms-Icon ms-Icon--pictureAdd"></i> <span class="ms-font-m">ms-Icon--pictureAdd</span></li>
                <li><i class="ms-Icon ms-Icon--pictureRemove"></i> <span class="ms-font-m">ms-Icon--pictureRemove</span></li>
                <li><i class="ms-Icon ms-Icon--desktop"></i> <span class="ms-font-m">ms-Icon--desktop</span></li>
                <li><i class="ms-Icon ms-Icon--tablet"></i> <span class="ms-font-m">ms-Icon--tablet</span></li>
                <li><i class="ms-Icon ms-Icon--mobile"></i> <span class="ms-font-m">ms-Icon--mobile</span></li>
                <li><i class="ms-Icon ms-Icon--table"></i> <span class="ms-font-m">ms-Icon--table</span></li>
                <li><i class="ms-Icon ms-Icon--hide"></i> <span class="ms-font-m">ms-Icon--hide</span></li>
                <li><i class="ms-Icon ms-Icon--shield"></i> <span class="ms-font-m">ms-Icon--shield</span></li>
                <li><i class="ms-Icon ms-Icon--header"></i> <span class="ms-font-m">ms-Icon--header</span></li>
                <li><i class="ms-Icon ms-Icon--paint"></i> <span class="ms-font-m">ms-Icon--paint</span></li>
                <li><i class="ms-Icon ms-Icon--support"></i> <span class="ms-font-m">ms-Icon--support</span></li>
                <li><i class="ms-Icon ms-Icon--settings"></i> <span class="ms-font-m">ms-Icon--settings</span></li>
                <li><i class="ms-Icon ms-Icon--creditCard"></i> <span class="ms-font-m">ms-Icon--creditCard</span></li>
                <li><i class="ms-Icon ms-Icon--reload"></i> <span class="ms-font-m">ms-Icon--reload</span></li>
                <li><i class="ms-Icon ms-Icon--peopleSecurity"></i> <span class="ms-font-m">ms-Icon--peopleSecurity</span></li>
                <li><i class="ms-Icon ms-Icon--fieldTextBox"></i> <span class="ms-font-m">ms-Icon--fieldTextBox</span></li>
                <li><i class="ms-Icon ms-Icon--multiChoice"></i> <span class="ms-font-m">ms-Icon--multiChoice</span></li>
                <li><i class="ms-Icon ms-Icon--fieldMail"></i> <span class="ms-font-m">ms-Icon--fieldMail</span></li>
                <li><i class="ms-Icon ms-Icon--contactForm"></i> <span class="ms-font-m">ms-Icon--contactForm</span></li>
                <li><i class="ms-Icon ms-Icon--circleHalfFilled"></i> <span class="ms-font-m">ms-Icon--circleHalfFilled</span></li>
                <li><i class="ms-Icon ms-Icon--documentPDF"></i> <span class="ms-font-m">ms-Icon--documentPDF</span></li>
                <li><i class="ms-Icon ms-Icon--bookmark"></i> <span class="ms-font-m">ms-Icon--bookmark</span></li>
                <li><i class="ms-Icon ms-Icon--circleUnfilled"></i> <span class="ms-font-m">ms-Icon--circleUnfilled</span></li>
                <li><i class="ms-Icon ms-Icon--circleFilled"></i> <span class="ms-font-m">ms-Icon--circleFilled</span></li>
                <li><i class="ms-Icon ms-Icon--textBox"></i> <span class="ms-font-m">ms-Icon--textBox</span></li>
                <li><i class="ms-Icon ms-Icon--drop"></i> <span class="ms-font-m">ms-Icon--drop</span></li>
                <li><i class="ms-Icon ms-Icon--sun"></i> <span class="ms-font-m">ms-Icon--sun</span></li>
                <li><i class="ms-Icon ms-Icon--lifesaver"></i> <span class="ms-font-m">ms-Icon--lifesaver</span></li>
                <li><i class="ms-Icon ms-Icon--lifesaverLock"></i> <span class="ms-font-m">ms-Icon--lifesaverLock</span></li>
                <li><i class="ms-Icon ms-Icon--mailUnread"></i> <span class="ms-font-m">ms-Icon--mailUnread</span></li>
                <li><i class="ms-Icon ms-Icon--mailRead"></i> <span class="ms-font-m">ms-Icon--mailRead</span></li>
                <li><i class="ms-Icon ms-Icon--inboxCheck"></i> <span class="ms-font-m">ms-Icon--inboxCheck</span></li>
                <li><i class="ms-Icon ms-Icon--folderSearch"></i> <span class="ms-font-m">ms-Icon--folderSearch</span></li>
                <li><i class="ms-Icon ms-Icon--collapse"></i> <span class="ms-font-m">ms-Icon--collapse</span></li>
                <li><i class="ms-Icon ms-Icon--expand"></i> <span class="ms-font-m">ms-Icon--expand</span></li>
                <li><i class="ms-Icon ms-Icon--ascending"></i> <span class="ms-font-m">ms-Icon--ascending</span></li>
                <li><i class="ms-Icon ms-Icon--descending"></i> <span class="ms-font-m">ms-Icon--descending</span></li>
                <li><i class="ms-Icon ms-Icon--filterClear"></i> <span class="ms-font-m">ms-Icon--filterClear</span></li>
                <li><i class="ms-Icon ms-Icon--checkboxEmpty"></i> <span class="ms-font-m">ms-Icon--checkboxEmpty</span></li>
                <li><i class="ms-Icon ms-Icon--checkboxMixed"></i> <span class="ms-font-m">ms-Icon--checkboxMixed</span></li>
                <li><i class="ms-Icon ms-Icon--boards"></i> <span class="ms-font-m">ms-Icon--boards</span></li>
                <li><i class="ms-Icon ms-Icon--checkboxCheck"></i> <span class="ms-font-m">ms-Icon--checkboxCheck</span></li>
                <li><i class="ms-Icon ms-Icon--frowny"></i> <span class="ms-font-m">ms-Icon--frowny</span></li>
                <li><i class="ms-Icon ms-Icon--lightBulb"></i> <span class="ms-font-m">ms-Icon--lightBulb</span></li>
                <li><i class="ms-Icon ms-Icon--globe"></i> <span class="ms-font-m">ms-Icon--globe</span></li>
                <li><i class="ms-Icon ms-Icon--deviceWipe"></i> <span class="ms-font-m">ms-Icon--deviceWipe</span></li>
                <li><i class="ms-Icon ms-Icon--listCheck"></i> <span class="ms-font-m">ms-Icon--listCheck</span></li>
                <li><i class="ms-Icon ms-Icon--listGroup"></i> <span class="ms-font-m">ms-Icon--listGroup</span></li>
                <li><i class="ms-Icon ms-Icon--timeline"></i> <span class="ms-font-m">ms-Icon--timeline</span></li>
                <li><i class="ms-Icon ms-Icon--fontIncrease"></i> <span class="ms-font-m">ms-Icon--fontIncrease</span></li>
                <li><i class="ms-Icon ms-Icon--fontDecrease"></i> <span class="ms-font-m">ms-Icon--fontDecrease</span></li>
                <li><i class="ms-Icon ms-Icon--fontColor"></i> <span class="ms-font-m">ms-Icon--fontColor</span></li>
                <li><i class="ms-Icon ms-Icon--mailCheck"></i> <span class="ms-font-m">ms-Icon--mailCheck</span></li>
                <li><i class="ms-Icon ms-Icon--mailDown"></i> <span class="ms-font-m">ms-Icon--mailDown</span></li>
                <li><i class="ms-Icon ms-Icon--listCheckbox"></i> <span class="ms-font-m">ms-Icon--listCheckbox</span></li>
                <li><i class="ms-Icon ms-Icon--sunAdd"></i> <span class="ms-font-m">ms-Icon--sunAdd</span></li>
                <li><i class="ms-Icon ms-Icon--sunQuestion"></i> <span class="ms-font-m">ms-Icon--sunQuestion</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThinUp"></i> <span class="ms-font-m">ms-Icon--chevronThinUp</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThinDown"></i> <span class="ms-font-m">ms-Icon--chevronThinDown</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThinLeft"></i> <span class="ms-font-m">ms-Icon--chevronThinLeft</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThinRight"></i> <span class="ms-font-m">ms-Icon--chevronThinRight</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThickUp"></i> <span class="ms-font-m">ms-Icon--chevronThickUp</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThickDown"></i> <span class="ms-font-m">ms-Icon--chevronThickDown</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThickLeft"></i> <span class="ms-font-m">ms-Icon--chevronThickLeft</span></li>
                <li><i class="ms-Icon ms-Icon--chevronThickRight"></i> <span class="ms-font-m">ms-Icon--chevronThickRight</span></li>
                <li><i class="ms-Icon ms-Icon--linkRemove"></i> <span class="ms-font-m">ms-Icon--linkRemove</span></li>
                <li><i class="ms-Icon ms-Icon--alertOutline"></i> <span class="ms-font-m">ms-Icon--alertOutline</span></li>
                <li><i class="ms-Icon ms-Icon--documentLandscape"></i> <span class="ms-font-m">ms-Icon--documentLandscape</span></li>
                <li><i class="ms-Icon ms-Icon--documentAdd"></i> <span class="ms-font-m">ms-Icon--documentAdd</span></li>
                <li><i class="ms-Icon ms-Icon--toggleMiddle"></i> <span class="ms-font-m">ms-Icon--toggleMiddle</span></li>
                <li><i class="ms-Icon ms-Icon--embed"></i> <span class="ms-font-m">ms-Icon--embed</span></li>
                <li><i class="ms-Icon ms-Icon--listNumbered"></i> <span class="ms-font-m">ms-Icon--listNumbered</span></li>
                <li><i class="ms-Icon ms-Icon--peopleCheck"></i> <span class="ms-font-m">ms-Icon--peopleCheck</span></li>
                <li><i class="ms-Icon ms-Icon--caretUpOutline"></i> <span class="ms-font-m">ms-Icon--caretUpOutline</span></li>
                <li><i class="ms-Icon ms-Icon--caretDownOutline"></i> <span class="ms-font-m">ms-Icon--caretDownOutline</span></li>
                <li><i class="ms-Icon ms-Icon--caretLeftOutline"></i> <span class="ms-font-m">ms-Icon--caretLeftOutline</span></li>
                <li><i class="ms-Icon ms-Icon--caretRightOutline"></i> <span class="ms-font-m">ms-Icon--caretRightOutline</span></li>
                <li><i class="ms-Icon ms-Icon--mailSync"></i> <span class="ms-font-m">ms-Icon--mailSync</span></li>
                <li><i class="ms-Icon ms-Icon--mailError"></i> <span class="ms-font-m">ms-Icon--mailError</span></li>
                <li><i class="ms-Icon ms-Icon--mailPause"></i> <span class="ms-font-m">ms-Icon--mailPause</span></li>
                <li><i class="ms-Icon ms-Icon--peopleSync"></i> <span class="ms-font-m">ms-Icon--peopleSync</span></li>
                <li><i class="ms-Icon ms-Icon--peopleError"></i> <span class="ms-font-m">ms-Icon--peopleError</span></li>
                <li><i class="ms-Icon ms-Icon--peoplePause"></i> <span class="ms-font-m">ms-Icon--peoplePause</span></li>
                <li><i class="ms-Icon ms-Icon--circleBall"></i> <span class="ms-font-m">ms-Icon--circleBall</span></li>
                <li><i class="ms-Icon ms-Icon--circleBalloons"></i> <span class="ms-font-m">ms-Icon--circleBalloons</span></li>
                <li><i class="ms-Icon ms-Icon--circleCar"></i> <span class="ms-font-m">ms-Icon--circleCar</span></li>
                <li><i class="ms-Icon ms-Icon--circleCat"></i> <span class="ms-font-m">ms-Icon--circleCat</span></li>
                <li><i class="ms-Icon ms-Icon--circleCoffee"></i> <span class="ms-font-m">ms-Icon--circleCoffee</span></li>
                <li><i class="ms-Icon ms-Icon--circleDog"></i> <span class="ms-font-m">ms-Icon--circleDog</span></li>
                <li><i class="ms-Icon ms-Icon--circleLightning"></i> <span class="ms-font-m">ms-Icon--circleLightning</span></li>
                <li><i class="ms-Icon ms-Icon--circlePill"></i> <span class="ms-font-m">ms-Icon--circlePill</span></li>
                <li><i class="ms-Icon ms-Icon--circlePlane"></i> <span class="ms-font-m">ms-Icon--circlePlane</span></li>
                <li><i class="ms-Icon ms-Icon--circlePoodle"></i> <span class="ms-font-m">ms-Icon--circlePoodle</span></li>
                <li><i class="ms-Icon ms-Icon--checkPeople"></i> <span class="ms-font-m">ms-Icon--checkPeople</span></li>
                <li><i class="ms-Icon ms-Icon--documentSearch"></i> <span class="ms-font-m">ms-Icon--documentSearch</span></li>
                <li><i class="ms-Icon ms-Icon--sortLines"></i> <span class="ms-font-m">ms-Icon--sortLines</span></li>
                <li><i class="ms-Icon ms-Icon--calendarPublic"></i> <span class="ms-font-m">ms-Icon--calendarPublic</span></li>
                <li><i class="ms-Icon ms-Icon--contactPublic"></i> <span class="ms-font-m">ms-Icon--contactPublic</span></li>
                <li><i class="ms-Icon ms-Icon--triangleUp"></i> <span class="ms-font-m">ms-Icon--triangleUp</span></li>
                <li><i class="ms-Icon ms-Icon--triangleRight"></i> <span class="ms-font-m">ms-Icon--triangleRight</span></li>
                <li><i class="ms-Icon ms-Icon--triangleDown"></i> <span class="ms-font-m">ms-Icon--triangleDown</span></li>
                <li><i class="ms-Icon ms-Icon--triangleLeft"></i> <span class="ms-font-m">ms-Icon--triangleLeft</span></li>
                <li><i class="ms-Icon ms-Icon--triangleEmptyUp"></i> <span class="ms-font-m">ms-Icon--triangleEmptyUp</span></li>
                <li><i class="ms-Icon ms-Icon--triangleEmptyRight"></i> <span class="ms-font-m">ms-Icon--triangleEmptyRight</span></li>
                <li><i class="ms-Icon ms-Icon--triangleEmptyDown"></i> <span class="ms-font-m">ms-Icon--triangleEmptyDown</span></li>
                <li><i class="ms-Icon ms-Icon--triangleEmptyLeft"></i> <span class="ms-font-m">ms-Icon--triangleEmptyLeft</span></li>
                <li><i class="ms-Icon ms-Icon--filePDF"></i> <span class="ms-font-m">ms-Icon--filePDF</span></li>
                <li><i class="ms-Icon ms-Icon--fileImage"></i> <span class="ms-font-m">ms-Icon--fileImage</span></li>
                <li><i class="ms-Icon ms-Icon--fileDocument"></i> <span class="ms-font-m">ms-Icon--fileDocument</span></li>
                <li><i class="ms-Icon ms-Icon--listGroup2"></i> <span class="ms-font-m">ms-Icon--listGroup2</span></li>
                <li><i class="ms-Icon ms-Icon--copy"></i> <span class="ms-font-m">ms-Icon--copy</span></li>
                <li><i class="ms-Icon ms-Icon--creditCardOutline"></i> <span class="ms-font-m">ms-Icon--creditCardOutline</span></li>
                <li><i class="ms-Icon ms-Icon--mailPublic"></i> <span class="ms-font-m">ms-Icon--mailPublic</span></li>
                <li><i class="ms-Icon ms-Icon--folderPublic"></i> <span class="ms-font-m">ms-Icon--folderPublic</span></li>
                <li><i class="ms-Icon ms-Icon--teamwork"></i> <span class="ms-font-m">ms-Icon--teamwork</span></li>
                <li><i class="ms-Icon ms-Icon--move"></i> <span class="ms-font-m">ms-Icon--move</span></li>
                <li><i class="ms-Icon ms-Icon--classroom"></i> <span class="ms-font-m">ms-Icon--classroom</span></li>
                <li><i class="ms-Icon ms-Icon--menu2"></i> <span class="ms-font-m">ms-Icon--menu2</span></li>
                <li><i class="ms-Icon ms-Icon--plus2"></i> <span class="ms-font-m">ms-Icon--plus2</span></li>
                <li><i class="ms-Icon ms-Icon--tag"></i> <span class="ms-font-m">ms-Icon--tag</span></li>
                <li><i class="ms-Icon ms-Icon--arrowUp2"></i> <span class="ms-font-m">ms-Icon--arrowUp2</span></li>
                <li><i class="ms-Icon ms-Icon--arrowDown2"></i> <span class="ms-font-m">ms-Icon--arrowDown2</span></li>
                <li><i class="ms-Icon ms-Icon--circlePlus"></i> <span class="ms-font-m">ms-Icon--circlePlus</span></li>
                <li><i class="ms-Icon ms-Icon--circleInfo"></i> <span class="ms-font-m">ms-Icon--circleInfo</span></li>
                <li><i class="ms-Icon ms-Icon--section"></i> <span class="ms-font-m">ms-Icon--section</span></li>
                <li><i class="ms-Icon ms-Icon--sections"></i> <span class="ms-font-m">ms-Icon--sections</span></li>
                <li><i class="ms-Icon ms-Icon--at"></i> <span class="ms-font-m">ms-Icon--at</span></li>
                <li><i class="ms-Icon ms-Icon--arrowUpRight"></i> <span class="ms-font-m">ms-Icon--arrowUpRight</span></li>
                <li><i class="ms-Icon ms-Icon--arrowDownRight"></i> <span class="ms-font-m">ms-Icon--arrowDownRight</span></li>
                <li><i class="ms-Icon ms-Icon--arrowDownLeft"></i> <span class="ms-font-m">ms-Icon--arrowDownLeft</span></li>
                <li><i class="ms-Icon ms-Icon--arrowUpLeft"></i> <span class="ms-font-m">ms-Icon--arrowUpLeft</span></li>
                <li><i class="ms-Icon ms-Icon--bundle"></i> <span class="ms-font-m">ms-Icon--bundle</span></li>
                <li><i class="ms-Icon ms-Icon--pictureEdit"></i> <span class="ms-font-m">ms-Icon--pictureEdit</span></li>
                <li><i class="ms-Icon ms-Icon--protectionCenter"></i> <span class="ms-font-m">ms-Icon--protectionCenter</span></li>
                <li><i class="ms-Icon ms-Icon--alert2"></i> <span class="ms-font-m">ms-Icon--alert2</span></li>
            </ul>
        </div>
    </section>
</body>
</html>